<template>
  <div class="container" :style="containerStyle">
    <view class="logo">
      <image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/05/17280608245782965.png" mode="aspectFill" />
    </view>
    <view class="title">
      <view class="name  bold tetxCenter flex justifyCenter">Hello, 👏</view>
      <view class="fz14 flex justifyCenter">欢迎来到顺联世界</view>
    </view>

    <view class="actionBtn">
      <!-- #ifdef APP-PLUS -->
      <uv-button @click="counter.appPhoneNumberLogin()" text="一键登录" shape="circle" :color="proxy.$config.actionBtn"></uv-button>
      <!-- #endif -->

      <!-- #ifdef MP-WEIXIN -->
      <uv-button @click="" text="一键登录" shape="circle" :color="proxy.$config.actionBtn"></uv-button>
      <!-- #endif -->

      <view class="btn" @click="toLogin">
        <uv-button text="手机号登录" shape="circle"></uv-button>
      </view>
    </view>

    <view class="checkbox flex alignBaseline justifyCenter" @click="checkboxClick">
      <uv-checkbox-group v-model="checkboxValue" activeColor="#e97398">
        <uv-checkbox :name="1"></uv-checkbox>
      </uv-checkbox-group>
      <view class="checkboxText fz12 flex">
        我已阅读并同意
        <text @click.stop="counter.toParse('user_agreement')">《个人信息保护指引》</text>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let checkboxValue = ref([]);

let containerStyle = computed(() => {
  return {
    paddingTop: `${counter.navBarHeight}px`,
  };
});

let checkboxClick = () => {
  if (checkboxValue.value.length) {
    checkboxValue.value = [];
  } else {
    checkboxValue.value = [1];
  }
};

function toLogin() {
  if (!checkboxValue.value.length)
    return proxy.$utils.showToast("请阅读并同意《个人信息保护指引》");
  proxy.$utils.toLink("/packagePages/login/mobileLogin");
}
</script>



<style lang="scss">
page {
  background-color: #f2f4fc;
}
</style>
<style lang="scss" scoped>
image {
  width: 100%;
  display: block;
}
.logo {
  width: 100px;
  height: 143px;
  margin: 20px auto 50px;
  image {
    height: 100%;
  }
}
.title {
  color: #16046b;
  .name {
    margin-bottom: 5px;
    font-size: 24px;
  }
}
.actionBtn {
  width: calc(100% - 30px);
  margin: 50px auto 30px;
  .btn {
    margin-top: 10px;
  }
}
::v-deep .checkbox {
  .uv-checkbox-group {
    flex: inherit !important;
  }
  .checkboxText {
    display: flex;
    flex-wrap: wrap;

    text {
      color: #e97398;
    }
  }
}
</style>